<template>
    <!-- 新ui图个人设置 -->
    <div class="top_box">
        <!-- 基本信息 -->
        <div class="user_box" style="">
            <div class="change_pwd">
                <!-- <el-button class="qr_but" @click="modify_pwd()"><span class="font_qr">修改密码</span></el-button> -->
                <el-button class="qr_but" @click="dialogFormVisible = true">修改密码</el-button>

                <el-dialog :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                          <el-form-item label="姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                          <el-form-item label="原密码" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                          <el-form-item label="原密码" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div style="">
                <el-form :model="form" ref="form" label-width="20%" label-position="right" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="form.userName" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" prop="branchName">
                        <el-input v-model="form.branchName" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '姓名不能为空', trigger: 'change' }]">
                        <el-input class="input_row" v-model="form.name" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="jobTitle">
                        <el-input class="input_row" v-model="form.jobTitle" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <div class="input_css" style="width: 96%">
                            &nbsp;
                            <el-radio-group v-model="form.sex">
                                <el-radio label="1">男</el-radio>
                                <el-radio label="0">女</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input class="input_row" v-model="form.phone" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="cell_phone">
                        <el-input class="input_row" v-model="form.cell_phone" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮件" prop="email">
                        <el-input class="input_row" v-model="form.email" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="邮编" prop="postCode">
                        <el-input class="input_row" v-model="form.postCode" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input class="input_row" v-model="form.address" placeholder="" style="width: 50%"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input
                            class="input_row"
                            v-model="form.remark"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder=""
                            style="width: 50%"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="qr_butt">
                <el-button class="qr_but" @click="save"><span class="font_qr">确认</span></el-button>
            </div>
        </div>
        <br />
        <!-- 录入信息 -->

        <div class="right_box2"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            submit_img: require('../../../../assets/imgs/组 422.png'),
            labelPosition: 'right',
            form: {},
            dialogFormVisible:false,
            formLabelWidth: '100px'
        };
    },
    watch: {},
    created() {
        this.getform();
    },
    methods: {
        modify_pwd() {},
        getform() {
            this.$post('/sysManage/user/personal').then((res) => {
                console.log(res);
                this.form = res.data;
            });
        },
        update() {
            this.$post('/sysManage/user/save', this.form).then((res) => {
                console.log(res);
                if (res.code == 2000) {
                    this.$message.success('保存成功!');
                }
            });
        },
        changeLayout(type) {
            let $ = this.$;
            if (type === 1) {
                $('.right_box').show();
                $('.left-2').css('cssText', 'position: relative;width: 100%;');
            } else if (type === 2) {
                $('.right_box').hide();
                $('.left-2').css('cssText', 'position: absolute;width: 98%;');
            }
        }
    },
    mounted() {
        this.changeLayout(2);
    },
    destroyed() {
        this.changeLayout(1);
    }
};
</script>
<style scoped>
/* 输入框样式 */
.el-input--small .el-input__inner {
    border: 0;
}
.input_css {
    border: 0;
}
.input_row {
    background: #fff;
}
.el-textarea__inner {
    background: #fff;
    height: 70px !important;
}
.fontStyle {
    font-size: 20px;
    font-family: '微软雅黑';
    color: #2e8ccc;
    font-weight: 600;
}
.el-divider--horizontal {
    margin: 10px 0;
    background-color: #2e8ccc;
    height: 2px;
}
.row_Css {
    font-size: 18px;
    font-family: '微软雅黑';
    color: #000;
    font-weight: 600;
}
.el-form-item__label {
    border: 1px solid #000000;
    background: greenyellow;
    padding: 0.5%;
}
.el-form-item__content {
    padding: 0.5% 0.5% 0% 0%;
    border: 1px solid #000;
}
.top_box {
    background-image: url('../../../../assets/pic/system/background_pic.png');
    width: 100%;
}
.user_box {
    border: 0px solid #f00;
    /* margin-top: 0.5%; */
    border-radius: 25px;
    /* background-color: #fff; */
    margin-left: 10%;
    height: 100%;
    width: 40%;
    float: left;
}
.right_box2 {
    height: 500px;
    width: 50%;
    float: right;
    background-image: url('../../assets//pic/system/decoration.png');
}
.qr_but {
    border-radius: 10px;
    width: 120px;
    color: #fff;
    background-color: rgb(78 165 191);
    border-color: none;
    font-size: 14px;
}
.change_pwd {
    margin-left: -20%;
}
.qr_butt {
    margin-left: 30%;
}
</style>
